<script setup lang="ts">
import { ref,watch } from 'vue'
import { useScroll } from '@vueuse/core'
import Swiper from '@/components/common/Swiper.vue'
import SwiperItem from '@/components/common/SwiperItem.vue'
import $api from '@/api/index'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
const $route=useRoute(),$router=useRouter(),$store=useStore()
if($route.query.token){
  $store.commit('user/setToken',$route.query.token)
}
const tabs=ref([
  {
    name:'热卖',
    value:'hot'
  },{
    name:'精品',
    value:'best'
  },{
    name:'新品',
    value:'new'
  },{
    name:'现货',
    value:'spot'
  }
])
const activeTab=ref('hot')
const isLoading=ref(false)
let goods=ref([]),pageNum=1,pageSize=5,hasMore=true,getList=null
const {data:banners}=$api.banner.getList('index')
const {data:cates}=$api.cate.getIndexList()
//获取商品列表
function getGoods(){
  if(!hasMore) return
  isLoading.value=true
  const params:any={}
  switch(activeTab.value){
    case 'hot':
      params.is_hot=true
      break
    case 'best':
      params.is_best=true
      break
    case 'new':
      params.is_new=true
      break
    case 'spot':
      params.is_on_sale=true
      break
  }
  params.page_num=pageNum
  params.page_size=pageSize
  const {data:list,loading}=$api.goods.getList(params)
  watch(list,(_list:[]) =>{
    if(_list.length==0) return hasMore=false
    _list.map((item:any) => {
      item._desc=`${item.name}${item.skus[0]?.sku_name??''}`
      item._price=item.skus[0]?.price??0
      goods.value.push(item)
    })
  })
  watch(loading,(_loading:boolean) =>{
    isLoading.value=_loading
  })
}
//商品分类改变
function changeTab(item){
  if(isLoading.value) return
  pageNum=1
  goods.value=[]
  hasMore=true
  activeTab.value=item.value
  
  getGoods()
}
//点击轮播图
function  onClickBanner(item){
  if(item.open_url.match(/^(http|https)/)){
    window.open(item.open_url,'_black')
  }
}
changeTab(tabs.value[0])
const target=ref()
const {x,y,arrivedState}=useScroll(target)
watch([x,y],([_x,_y]) =>{
  if(arrivedState.bottom){
    pageNum++
    getGoods()
  }
})
//跳转商品详情
function gotoDetail(item) {
  _hmt.push(['goodsClick','goods','click','id',item._id])
  $router.push({
    path:'/goods/detail',
    query:{
      id:item._id
    }
  })
}
</script>

<template>
  <div ref="target"
    w:bg="blue-gray-100"
    w:h="full"
    w:overflow="y-scroll"
  >
    <Swiper>
      <SwiperItem v-for="(item,idx) in banners" :key="item._id" @click="onClickBanner(item)">
        <img :src="item.bannerfile" />
      </SwiperItem>
    </Swiper>
    <div
      w:flex="~ wrap"
      w:m="y-8 x-4"
    >
      <div v-for="(item,idx) in cates" :key="item._id"
        w:flex="~ col"
        w:align="items-center"
        w:w="1/5"
        w:m="b-4"
      >
        <img :src="item.icon" 
          w:w="20"
          w:bg="cover"
        />
        <div>{{item.name}}</div>
      </div>
    </div>
    <div
      w:flex="~"
      w:align="items-stretch"
      w:bg="light-50"
      w:border="rounded-3xl"
      w:h="24"
      w:m="x-4"
      w:font="bold"
      w:text="xl"
      w:pos="sticky top-0"
    >
      <div v-for="(item,idx) in tabs" :key="idx" :class="{active:activeTab==item.value}" @click="changeTab(item)"
        w:m="x-6 t-8"
        w:flex="~ col"
        w:align="items-center"
        w:justify="between"
      >
        <div>{{item.name}}</div>
        <div class="line"
          w:w="full"
          w:m="b-4"
        ></div>
      </div>
    </div>
    <div v-loading="isLoading" v-empty="goods.length"
      w:flex="~ wrap"
      w:m="x-4"
      w:h="min-100"
    >
      <div v-for="(item,idx) in goods" :key="item._id" @click="gotoDetail(item)"
        w:w="1/2"
      >
        <div
          w:m="2"
          w:p="2"
          w:bg="light-50"
        >
          <img :src="item.goods_thumb" />
          <div class="line-clamp-1">{{item._desc}}</div>
          <div
            w:text="red-600"
          >
            <span w:text="xl">￥</span>
            <span w:text="3xl">{{item._price}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.active{
  color: rgb(17, 114, 255);
  .line{
    height: 2PX;
    background: rgb(17, 114, 255);
  }
}
</style>

<route>
{
  name: "home",
  meta: {
    roles: [],
    cache: true,
    isTabBar: true
  }
}
</route>